<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="artDialog/skins/default.css"
	type="text/css"></link>
<title>DEMO</title>
<script type="text/javascript" src="js/apiv1.3.min.js"></script>
<!--script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script-->
<link rel="stylesheet" type="text/css" href="bmap.css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="artDialog/artDialog.min.js"></script>
<script type="text/javascript" src="artDialog/jquery.artDialog.min.js"></script>
<script type="text/javascript" src="artDialog/artDialog.plugins.min.js"></script>
<script type="text/javascript" src="js/util.js"></script>
</head>
<body>
	<div class="place">
		<span>位置：</span>
		<ul class="placeul">
			<li><a href="#">首页</a></li>
			<li><a href="#">线路管理</a></li>
			<li><a href="#">线路信息</a></li>
		</ul>
		<span style="color: FF6633;">单击塔杆进行设置</span>
		
	</div>
	

	<div
		style="width:100%;height:70%;border:1px solid gray;position:absolute;"
		id="container"></div>

	<div id="addRoute" style="position:absolute;top:80%;left:0%;">
		路线名称:<input type="text" id="lxmc" class="dfinput" style="width:80px;" />
		路线ID:<input type="text" id="lxid" class="dfinput" style="width:80px;" />
		电压:<input type="text" id="lxdy" class="dfinput" style="width:80px;" />
		<input type="button" class="btn" value="设置起始杆塔" id="btn_start"
			onclick="setStart()" /> <input type="text" id="sno" class="dfinput"
			disabled="disabled" style="width:70px;" value="起始杆塔" /> <label
			id="startNO" style="display: none"></label> <input type="button"
			class="btn" value="设置终止杆塔" id="btn_end" onclick="setEnd()" /> <input
			type="text" id="eno" class="dfinput" disabled="disabled"
			style="width:70px;" value="终止杆塔" /> <label id="endNO"
			style="display: none"> </label>
			
<input id="search_pole_id" type="text" class="dfinput" value=""  style="width:108px;" placeholder="搜索塔杆"/>
			<input type="button"   class="btn"  id="addpole" value="查询塔杆"  style="width:120px;margin-left:15px;" onclick="search_pole()" />

			
		<p>
			<br>
		</p>
		<label id="add_polies" style="display: none"></label><label
			id="route_length" style="display: none"></label> 塔杆：<input
			type="text" id="gantalist" class="dfinput" disabled="disabled" /> <input
			type="button" class="btn" value="设置杆塔集合" id="set_polies"
			onclick="setPolies();" /> 线路长度:<input type="text" id="linelength"
			class="dfinput" disabled="disabled" style="width:80px;" /> <input
			type="button" class="btn" id="btn_addRoute" value="添加路线"
			disabled="disabled" onclick="addRouteLine()" />
			线路路线:
		<select id="rouLine" class="newdeleteRoutLine">
		
		</select>
		<input type="button"  class="btn"   value="查询路线" id="btn_end" onclick="selectRoutLine()" />

	</div>
	
	
	
	
	
</body>
</html>
<script type="text/javascript">
	
	var mapOptions = {
		mapType : BMAP_NORMAL_MAP,
		maxZoom : 10, //地图最大层级
		minZoom : 5
	};
	
	// 百度地图API功能
	var map = new BMap.Map("container", mapOptions); 		// 创建Map实例
	var initPoint = new BMap.Point(116.404, 39.915); // 创建点坐标
	map.centerAndZoom(initPoint, 8);  // 初始化地图,设置中心点坐标和地图级别。
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
	}));
	map.setCurrentCity("北京");			 // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);    //开启鼠标滚轮缩放
	map.enableKeyboard(); 				// 启用键盘操作。  
	map.enableContinuousZoom();        //启用连续缩放效果



	// ----- control -----
	map.addControl(new BMap.NavigationControl()); //地图平移缩放控件
	map.addControl(new BMap.ScaleControl()); //显示比例尺在右下角
	
	var overView = new BMap.OverviewMapControl();
	var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
	map.addControl(overView);          //添加默认缩略地图控件
	map.addControl(overViewOpen);      //右下角，打开

	// ----- Hide or Show Pole -----
	map.addEventListener("zoomend", function() {
		var overlays = map.getOverlays();
	    for ( var i = 0; i < overlays.length - 1; i++) {
			if (overlays[i]._config.icon) {
				 if (overlays[i]._config.icon.imageUrl.indexOf("images/circle")!=-1) {
					if (map.getViewport().zoom <= 7) {
						overlays[i].hide();
					} else {
						overlays[i].show();
					}
				} 
			} 
		}
	});
	
	
	/* ----自定义控件---- */
	// 定义一个控件类,即function
	function ZoomControl(){
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
	  this.defaultOffset = new BMap.Size(75, 20);
	}
	
	function ZoomControl2(){
	  // 默认停靠位置和偏移量
	  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
	  this.defaultOffset = new BMap.Size(135, 20);
	}
	
	
	// 通过JavaScript的prototype属性继承于BMap.Control
	ZoomControl.prototype = new BMap.Control();
	ZoomControl2.prototype=new BMap.Control();

	// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
	// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
	ZoomControl.prototype.initialize = function(map){
	  // 创建一个DOM元素
	  var div = document.createElement("div");
	  // 添加文字说明
	  div.appendChild(document.createTextNode("放大2级"));
	  // 设置样式
	  div.style.cursor = "pointer";
	  div.style.border = "2px solid gray";
	  div.style.backgroundColor = "white";
	  // 绑定事件,点击一次放大两级
	  div.onclick = function(e){
		map.setZoom(map.getZoom() + 2);
	  };
	  // 添加DOM元素到地图中
	  map.getContainer().appendChild(div);
	  // 将DOM元素返回
	  return div;
	};
	
	ZoomControl2.prototype.initialize = function(map){
	  // 创建一个DOM元素
	  var div = document.createElement("div");
	  // 添加文字说明
	  div.appendChild(document.createTextNode("缩小2级"));
	  // 设置样式
	  div.style.cursor = "pointer";
	  div.style.border = "2px solid gray";
	  div.style.backgroundColor = "white";
	  // 绑定事件,点击一次放大两级
	  div.onclick = function(e){
		map.setZoom(map.getZoom() - 2);
	  };
	  // 添加DOM元素到地图中
	  map.getContainer().appendChild(div);
	  // 将DOM元素返回
	  return div;
	};
	
	
	// 创建控件
	var myZoomCtrl = new ZoomControl();
	var myZoomCtrl2 = new ZoomControl2();
	// 添加到地图当中
	map.addControl(myZoomCtrl);
	map.addControl(myZoomCtrl2);
		


	var menu=new BMap.ContextMenu();
	var txtMenuItem=[
		{
			text:"放大",
			callback:function(){map.zoomIn()}
		},
		{
			text:"缩小",
			callback:function(){map.zoomOut()}
		}
	];
	
	for(var i=0;i<txtMenuItem.length;i++){
		menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
	}
	
	map.addContextMenu(menu);
	
	
	
	
	function addPole(lng, lat, opts, color) {
		var point = new BMap.Point(lng, lat);
		var myIcon = new BMap.Icon("images/circle.png", new BMap.Size(16, 16));

		var marker = new BMap.Marker(point, {
			icon : myIcon,
			enableDragging : false,
			draggingCursor : "move",
			title : opts
		});
	
		marker.addEventListener("mouseover", function(type, target, point,
				pixel) {
			var x = type.pixel.x;
			var y = type.pixel.y;
			$("body").append("<div id =\"routeDiv\"></div>")
			routeDiv = $("#routeDiv").css("position", "absolute").css("top", y)
					.css("left", x).css("z-index", 1);
			routeDiv.html("<span style=\"font-size:12px;font-weight:bolder\">"
					+ opts + "</span>");
		});
		marker.addEventListener("mouseout", function() {
			if (routeDiv) {
				routeDiv.remove();
			}
		});
		/*
		marker.addEventListener("dragging", function(e) {
			document.getElementById("position").innerHTML = "x :" + e.pixel.x + " y :" + e.pixel.y + "<br>lng: " + e.point.lng + " lat: " + e.point.lat;
		}); */
		map.addOverlay(marker);
		return marker;
	}

	var routeDiv;
	function addRoute(points, opts, color) {

		var polyline = new BMap.Polyline(points, {
			strokeColor : color,
			strokeWeight : 3,
			strokeOpacity : 0.8
		});
		polyline.addEventListener("mouseover", function(type, target, point,
				pixel) {
			var x = type.pixel.x;
			var y = type.pixel.y;
			$("body").append("<div id =\"routeDiv\"></div>")
			routeDiv = $("#routeDiv").css("position", "absolute").css("top", y)
					.css("left", x).css("z-index", 1);
			routeDiv.html("<span style=\"font-size:12px;font-weight:bolder\">"
					+ opts + "</span>");
		});
		polyline.addEventListener("mouseout", function() {
			if (routeDiv) {
				routeDiv.remove();
			}
		});
		map.addOverlay(polyline);
	}

	function setStart() {
		$("#btn_end").attr("disabled", true);
		map.addEventListener("click", start_click);
	}

	function setEnd() {
		map.addEventListener("click", end_click);
	}

	function setPolies() {
		if ($("#set_polies").val() == "确认设置") {
			map.removeEventListener("click", add_polies_click);
			$("#set_polies").attr("disabled", true);
			$("#btn_addRoute").attr("disabled", false);
			$("#set_polies").val("设置完毕");
			return;
		}
		map.addEventListener("click", add_polies_click);
		$("#set_polies").val("确认设置");
	}

	var add_polyLine;
	function add_polies_click(type) {
		if (type.overlay) {
			var title = type.overlay._config.title;
			if (title == $("#startNO").html() || title == $("#endNO").html()) {//不能是起点或终点
				alert("不能起点或终点");
				return;
			}
			okCancelAlert("设置杆塔", "确定将:" + title + "添加到该线路中吗？", function() {
				debugger;
				var html = $("#add_polies").html();
				var html1 = $("#gantalist").val();
				if (html == "") {
					html = title;
					html1 = title;
				} else {
					var arr = html.split("<br>");
					for (var i = 0; i < arr.length; i++) {
						if (arr[i] == title) {//不能重复
							return;
						}
					}
					html += "<br>" + title;
					html1 += "," + title;
				}
				$("#add_polies").html(html);
				$("#gantalist").val(html1);
				var length = calc_length(html);//计算长度
				$("#route_length").html(length);
				$("#linelength").val(length);
				add_drawRouteLine(html);//画线

			}, function() {
			});

		}
	}

	function add_drawRouteLine(html) {
	
		map.removeOverlay(add_polyLine);
		var spoint = getPointByPointTitle($("#startNO").html());  //获取起点point
		var epoint = getPointByPointTitle($("#endNO").html());    //获取终点point
		var arr = html.split("<br>");
		var points = new Array(arr.length + 2);
		points[0] = spoint;
		for (var i = 0; i < arr.length; i++) {
			points[i + 1] = getPointByPointTitle(arr[i]);
		}
		points[points.length - 1] = epoint;

		add_polyLine = new BMap.Polyline(points, {
			strokeColor : "blue",
			strokeWeight : 3,
			strokeOpacity : 0.8
		});
		map.addOverlay(add_polyLine);

	}

	function calc_length(html) {
		var arr = html.split("<br>");
		var spoint = getPointByPointTitle($("#startNO").html());//获取起点point
		var epoint = getPointByPointTitle($("#endNO").html());//获取终点point
		var length = 0;
		if (arr.length > 1) {
			length = map.getDistance(spoint, getPointByPointTitle(arr[0]));

			for (var m = 1; m < arr.length; m++) {
				length += map.getDistance(getPointByPointTitle(arr[m - 1]),
						getPointByPointTitle(arr[m]));
			}

			length += map.getDistance(
					getPointByPointTitle(arr[arr.length - 1]), epoint);

		} else {
			length = map.getDistance(spoint, epoint);
		}
		length = (length / 1000) + "";
		var tmp = length.split(".");
		length = tmp[0] + "." + tmp[1].substring(0, 3) + "公里";

		return length;
	}

	function getPointByPointTitle(title) {
		var overlays = map.getOverlays();
		for (var i = 0; i < overlays.length; i++) {
			if (overlays[i]._config) {
				if (overlays[i]._config.title == title) {
					return overlays[i]._config.point;
				}
			}
		}
	}

	function end_click(type) {
	
		okCancelAlert("设置终止杆塔", "确定将:" + type.overlay._config.title
				+ "设置为终止杆塔吗？", function() {
				
			//改1.0
			var title=type.overlay._config.title;	
				
			console.info(type.overlay);
				
			$("#endNO").html(title);
			
			$("#eno").val(title);
			
			map.removeEventListener("click", end_click);
			$("#btn_end").attr("disabled", true);
			$("#set_polies").attr("disabled", false);


				var html = "";
				if(html==""){
					html = title;
				}else{
					html += "<br>" + title;
				}
				var length = calc_length(html);//计算长度
				$("#route_length").html(length);
				$("#linelength").val(length);
				add_drawRouteLine(html);//画线
				$("#btn_addRoute").attr("disabled", false);	
							

		}, function() {
		});
	}

	function start_click(type) {
		okCancelAlert("设置起始杆塔", "确定将:" + type.overlay._config.title
				+ "设置为起始杆塔吗？", function() {
			$("#startNO").html(type.overlay._config.title);
			$("#sno").val(type.overlay._config.title);
			map.removeEventListener("click", start_click);
			$("#btn_start").attr("disabled", "disabled");
			$("#btn_end").attr("disabled", false);
		}, function() {
		});
	}

	$.post("pole!findList.action", function(data) {
		var polies = eval("(" + data + ")");
		var arr = [ "", "_red", "_yellow" ];
		for (var i = 0; i < polies.length; i++) {
			addPole(polies[i].lng, polies[i].lat, polies[i].id, arr[i % 3]);
		}
	});

	//findAllPolies
	$.post("route!findAllPolies.action", function(data) {
		var json = eval("(" + data + ")");
		for (var i = 0; i < json.length; i++) {
			var polies = json[i];
			var points = new Array();
			var name = "";
			var points1 = new Array();
			for (var x = 0; x < polies.length; x++) {
				points[x] = new BMap.Point(polies[x].lng, polies[x].lat);
				name = polies[x].routeName;
			}
			addRoute(points, name, "green");
			var meter = 0;
			for (var m = 1; m < points.length; m++) {
				meter += map.getDistance(points[m - 1], points[m]);
			}
		}
	});

	/*
	 $.post("route!findList.action?"+Math.random(), function(data) {
	 var routies = data

	 for ( var i = 0; i < routies.length; i++) {
	 if (routies[i]) {
	 $.post("route!findPoliesByCid.action?"+Math.random(), {
	 "cid" : routies[i].id
	 },
	 function(data) {
	 var polies = data

	 var points = new Array();
	 var name = "";
	 var points1 = new Array();
	 for ( var x = 0; x < polies.length; x++) {
	 points[x] = new BMap.Point(polies[x].lng,
	 polies[x].lat);
	 name = polies[x].routeName;
	 }
	 addRoute(points, name, "green");
	 var meter = 0;
	 for ( var m = 1; m < points.length; m++) {
	 meter += map.getDistance(points[m - 1],
	 points[m]);
	 }
	 //alert(name+"长度为:"+meter+"米");

	 });
	 }
	 }
	 });*/

	function addRouteLine() {

		if ($("#lxmc").val() == "") {
			alert("请填写线路名称");
			return;
		}

		if ($("#lxid").val() == "") {
			alert("请填写线路ID");
			return;
		}

		if ($("#lxdy").val() == "") {
			alert("请填写线路电压");
			return;
		}
		
		if(isNaN($("#lxdy").val())){
			alert("请输入数字");
			return;
		}
		
		var startNo=$("#startNO").html();
		var polies=$("#add_polies").html().split("<br>").join(",");
		var endNo=$("#endNO").html();
		
		var ids="";
		
		if(polies==""){
		 ids = startNo + ","
				+ endNo;
		}else{
		 ids = startNo + ","
				+ polies + ","
				+ endNo;
		}
		
		$.post("route!addCircuitry.action", {
			"poleIds" : ids,
			"circuitry.length" : $("#route_length").html(),
			"circuitry.name" : $("#lxmc").val(),
			"circuitry.id" : $("#lxid").val(),
			"circuitry.voltage" : $("#lxdy").val(),
			"circuitry.poleByEndpoleNo.id" : $("#endNO").html(),
			"circuitry.poleByStartpoleNo.id" : $("#startNO").html()
		}, function(data) {
			var json = eval("(" + data + ")");
			switch (json.code) {
			case 1:
				alert("添加成功!");
				setTimeout(function () { 
						location.reload(true);
					}, 1500);
				break;
			default:
				alert("添加失败");

			}
		});
	}

	$(function() {
		$("#btn_start").attr("disabled", false);
		$("#btn_end").attr("disabled", true);
		$("#set_polies").attr("disabled", true);
		$("#btn_addRoute").attr("disabled", true);
		search_route();
	});
	
	
	
	
	
	function search_pole(){
		var searchId = $("#search_pole_id").val();
		if(searchId==""){
			defaultAlert("搜索杆塔","杆塔编号不能为空");
		}else{
			$.post("pole!findPoleById.action",{"id":searchId},function(data){
				var pole = eval("("+data+")");
				if(pole==null){
					defaultAlert("搜索杆塔","没有搜索到杆塔:"+searchId);
				}else{
				var initPoint = new BMap.Point(pole.lng, pole.lat); // 创建点坐标

				map.centerAndZoom(initPoint, 10); // 初始化地图,设置中心点坐标和地图级别。
				
				}
			});
		}
	}
	
	
	
	
	
	function search_route(){
			$.post("route!findList.action",function(data)
		{	
			var operation="<option selected='selected'>请选择</option>";
			var bean = eval("("+data+")");
			for(var i = 0 ; i < bean.length;i++){
				operation += "<option value="+bean[i].name+">"+bean[i].name+"</option>";
			}
			$("#rouLine").html(operation);
		
		});
	}
	
	
	function selectRoutLine() {
		
		var searchId=$("#rouLine").val();
		var searchName=$("#rouLine").val();
		if(searchName==""){
			defaultAlert("搜索路线","路线编号不能为空");
		}else{
			$.post("route!findPoleByStartpoleNo.action",{"cname":searchName},function(data){
				var pole = eval("("+data+")");
				
				if(pole==null){
					defaultAlert("搜索路线","没有搜索到路线:"+searchId);
				}else{
				pole=pole[0];
				var lng=pole[1];
				var lat=pole[2];
				var initPoint = new BMap.Point(lng, lat); // 创建点坐标
				map.centerAndZoom(initPoint, 10); // 初始化地图,设置中心点坐标和地图级别。
				}
			});
		}
		
		
	}
	
	
	map.addEventListener("click",selectRoute);
	function selectRoute(type){
	if(!type.overlay){
		return;
	}
	}
</script>
